<template>
  <div>
    <panel title="单据查询条件" :enableToggle="false">
      <Form ref="frmParams" :model="form" :label-width="70">
        <Row :gutter="10">
          <Col span="4"> 
            <FormItem label="Host">
              <Select v-model="form.env">
                <Option v-for="item of form.envs" :value="item.value">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="14">
            <FormItem label="ID | 流水号"
              <Input v-model="form.serialNumber" placeholder="请输入业务ID或者流水号" />
            </FormItem>
          </Col>
          <Col span="6">
            <ButtonGroup shape="circle">
              <Button @click="search" type="primary" icon="ios-search">查询</Button>
              <Button type="success" icon="md-copy" :disabled="!workflow.common.ID" @click="onCopyResult">复制结果</Button>
            </ButtonGroup>
          </Col>
        </Row>
      </Form>
    </panel>
    <div class="workflow-detail" v-if="workflow.common.ID">
      <p>
        主数据信息(双击项复制值)
        <ButtonGroup shape="circle">
          <Button type="primary" icon="md-eye" @click="getThirdApis">查看回调</Button>
        </ButtonGroup>
      </p>
      <bizform :data="workflow.common" />

      <p>当前审批人</p>
      <Table border :columns="columns.worklists" :data="workflow.worklists"></Table>

      <p>审批人列表</p>
      <Table border :columns="columns.destinationUsers" :data="workflow.destinationUsers">
        <template #hold-on="{row}">
          <p>{{ row.HoldStartDate | datetime }}</p>
          <p>{{ row.HoldComments }}</p>
        </template>
      </Table>

      <p>审批日志</p>
      <Table border :columns="columns.logs" :data="workflow.logs" />
    </div>
    <Modal v-model="showThirdApi" :fullscreen="true" title="三方接口调用">
      <table class="table">
        <tbody v-for="(api, index) of thirdApis">
          <tr>
            <th rowspan="8" style="width:70px;">{{ index + 1 }}</th>
            <th style="width:130px;">系统名称</th>
            <td>{{ api.SystemName }}({{ api.id }})</td>
          </tr>
          <tr>
            <th>接口</th>
            <td>{{ api.Method }} - {{ api.Url }}</td>
          </tr>
          <tr>
            <th style="height:auto;">发送数据</th>
            <td style="height:auto;">{{ api.PostData }}</td>
          </tr>
          <tr>
            <th>执行结果</th>
            <td>{{ api.Result }}</td>
          </tr>
          <tr>
            <th>执行次数</th>
            <td>{{ api.SendTimes }}</td>
          </tr>
          <tr>
            <th>开始时间</th>
            <td>{{ api.CreateTime }}</td>
          </tr>
          <tr>
            <th>最后发送时间</th>
            <td>{{ api.LastSendTime }}</td>
          </tr>
          <tr>
            <th>发送状态</th>
            <td>
              {{ api.SendStatus }}
              <Button @click="RedoCallApi(api.id)" v-if="api.SendStatus == 0 && api.SendTimes == 6" type="primary" shape="circle" icon="ios-redo">
                重新发送
              </Button>
            </td>
          </tr>
        </tbody>
      </table>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
export default {
  components: {
    'json-view': () => import('~/components/basic/JsonView.vue'),
    bizform: () => import('~/pages/capitaland/components/BizFormCommon.vue'),
  },
  data() {
    return {
      form: {
        env: 'uat',
        envs: [
          { name: '正式环境', value: 'prod' },
          { name: 'UAT&测试环境', value: 'uat' },
        ],
        serialNumber: '',
      },
      workflow: {
        common: {},
        worklists: [],
        destinationUsers: [],
        logs: [],
      },
      thirdApis: [],
      columns: {
        worklists: [
          {
            title: 'ID',
            key: 'ID',
            width: 100,
          },
          {
            title: 'NodeId',
            key: 'NodeID',
            width: 100,
          },
          {
            title: 'K2WorkflowSN',
            key: 'K2WorkflowSN',
            width: 160,
          },
          {
            title: '审批人ID',
            key: 'ApprovalUserID',
            width: 160,
          },
          {
            title: '审批人',
            render: (h, { row }) => {
              return h('span', `${row.ApprovalUserDisplayNameCN}(${row.ApprovalUserDisplayNameEN})`);
            },
          },
        ],
        destinationUsers: [
          {
            title: 'ID',
            key: 'ID',
            width: 100,
          },
          {
            title: 'NodeId',
            key: 'NodeID',
            width: 100,
          },
          {
            title: 'RoleTypeID',
            key: 'RoleTypeID',
            width: 120,
          },
          {
            title: 'UserID',
            key: 'UserID',
            width: 140,
          },
          {
            title: '用户信息',
            width: 200,
            render: (h, data) => {
              let item = data.row;

              return h('span', `${item.UserDisplayNameCN}(${item.UserDisplayNameEN})`);
            },
          },
          {
            title: 'UserID(实际)',
            width: 140,
            render: (h, { row }) => {
              return h('span', `${row.OperatorUserID || row.UserID}`);
            },
          },
          {
            title: '用户信息(实际)',
            width: 200,
            render: (h, data) => {
              let item = data.row;

              return h('span', `${item.OperatorDisplayNameCN || item.UserDisplayNameCN}(${item.OperatorDisplayNameEN || item.UserDisplayNameEN})`);
            },
          },
          {
            title: '审批状态',
            width: 100,
            render: (h, data) => {
              return h('span', `${data.row.IsApproved ? '已审批' : '未审批'}`);
            },
          },
          {
            title: '创建时间',
            width: 170,
            render: (h, data) => {
              return h('span', data.row.CreatedOn);
            },
          },
          {
            title: '暂缓',
            width: 200,
            slot: 'hold-on',
          },
        ],
        logs: [
          {
            title: '审核人',
            width: 280,
            render: (h, { row }) => {
              return h('span', `${row.ApprovalUserDisplayNameCN}(${row.ApproverID})`);
            },
          },
          {
            title: '实际审核人',
            width: 280,
            render: (h, { row }) => {
              return h('span', `${row.OriginalityUserDisplayNameCN}(${row.OriginalityUserID})`);
            },
          },
          {
            title: '审批日期',
            width: 170,
            render: (h, { row }) => {
              return h('span', row.AuditingDate);
            },
          },
          {
            title: '动作',
            key: 'ActionName',
            width: 120,
          },
          {
            title: '审批意见',
            key: 'Comment',
          },
        ],
      },
      showThirdApi: false,
    };
  },
  methods: {
    search() {
      if (!this.form.serialNumber) {
        this.$Message.warning('请输入ID | 流水号');

        return;
      }

      this.$http.get(`/api/iworkflow/${this.form.env}/workflow/details?serialNumber=${this.form.serialNumber}`).then(res => {
        this.workflow.common = res.common || {};
        this.workflow.worklists = res.worklists || [];
        this.workflow.destinationUsers = res.destinationUsers || [];
        this.workflow.logs = res.logs || [];
      });
    },
    onCopyResult() {
      this.$copyText(JSON.stringify(this.workflow, null, 2)).then(() => {
        this.$Message.success('结果已复制！');
      });
    },
    getColumns(data) {
      let columns = [];
      let props = Object.getOwnPropertyNames(data);

      props.forEach(p => {
        columns.push({
          title: p,
          key: p,
          width: 120,
        });
      });

      return columns;
    },
    getThirdApis() {
      this.$http.get(`/api/iworkflow/log/${this.form.env}/thirdparty/${this.workflow.common.ID}`).then(rs => {
        this.showThirdApi = true;
        this.thirdApis = rs.datas;
      });
    },
    RedoCallApi(apiId) {
      const self = this;

      this.$Modal.confirm({
        title: '提示',
        content: '是否确定重新开始回调？',
        onOk: () => {
          this.$http.post(`/api/iworkflow/log/${this.form.env}/redoCall/${apiId}`).then(res => {
            self.getThirdApis();
          });
        },
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.ivu-card .ivu-card-body .ivu-form-item {
  margin-bottom: 5px;
}

.ivu-table-wrapper {
  margin-bottom: 10px;
}

.workflow-detail {
  margin-top: 10px;

  > p {
    background: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 9px 15px;
    border: 1px solid #d8d8d8;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px;
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
    height: 42px;
    width: 100%;

    > .ivu-btn-group {
      top: -5px;
      float: right;
    }
  }
}

.ivu-modal-fullscreen {
  .ivu-modal-close {
    top: -2px;

    > .ivu-icon {
      color: #fff;
    }
  }

  .ivu-modal-header {
    padding: 5px 16px;
    color: #fff;
    background: #2d8cf0;

    > .ivu-modal-header-inner {
      color: #fff;
    }
  }

  .ivu-modal-body {
    top: 38px;
    bottom: 5px;
    padding: 5px 10px;
  }

  .ivu-modal-footer {
    display: none;
  }
}

.table {
  height: auto;

  th {
    height: auto;
    text-align: right;
    background: transparent;
    border-bottom: 1px solid #e8eaec;

    &:after {
      content: '：';
    }

    &[rowspan] {
      text-align: center;
      padding-right: 0;
      border-right: 1px solid #e8eaec;

      &:after {
        content: '';
      }
    }
  }

  > tbody {
    margin-bottom: 10px;

    td {
      height: auto;
      padding: 8px 0 8px 5px;
      line-height: 16px;
    }
  }
}
</style>
